

<script setup>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import Header from '@/components/Header.vue'
import { useAdminStore } from '@/stores/admin'
// 替换为鞋类管理相关图标（商品、库存、订单等）
import { Goods, OfficeBuilding,Postcard, User, ChatRound, Headset, List,CreditCard } from '@element-plus/icons-vue'
import { UserFilled,Ship,Shop,Link,Coin, RefreshLeft,Menu,Message, Box,PictureFilled,Edit,Histogram } from '@element-plus/icons-vue'

const store = useAdminStore()
// 登录页不显示菜单，新增注册页排除
const noMenu = ['/login']
const router = useRouter()
const dataInfo = reactive({
  showMenu: true,
  defaultOpen: ['1', '2'], // 默认展开商品管理、订单管理
  currentPath: '/',
  // 新增菜单折叠状态（提升大屏利用率）
  isCollapse: false,
  // 新增当前时间（增强页面动态感）
  currentTime: new Date().toLocaleString()
})

// 实时更新当前时间1
setInterval(() => {
  dataInfo.currentTime = new Date().toLocaleString()
}, 1000)

// 菜单折叠/展开切换
const toggleMenu = () => {
  dataInfo.isCollapse = !dataInfo.isCollapse
}

// 全局前置路由守卫（保留权限控制，优化菜单显示逻辑）
// router.beforeEach((to, from, next) => {
//   if (noMenu.includes(to.path)) {
//     next()
//   } else {
//     // 未登录跳转登录页
//     if (!store.getToken || store.getToken === '') {
//       next({ path: '/login' })
//     } else {
//       next()
//     }
//   }
//   dataInfo.showMenu = !noMenu.includes(to.path)
//   dataInfo.currentPath = to.path
// })
</script>

<template>
  <div class="layout">
    <el-container v-if="dataInfo.showMenu" class="container">
    <!-- 主容器：增加加载过渡动画 -->
    <transition name="layout-fade">
      <div class="container-wrapper" :class="{ 'collapsed': dataInfo.isCollapse }">
        <!-- 侧边栏：鞋类电商风格 -->
        <el-aside 
          class="aside" 
          :width="dataInfo.isCollapse ? '64px' : '250px'"
        >
          <!-- 侧边栏头部：品牌标识区 -->
          <div class="aside-header" :class="{ 'collapsed': dataInfo.isCollapse }">
            <div class="brand-container">
              <!-- 鞋类品牌Logo（可替换为实际Logo） -->
              <img 
                src="/src/photos/logo.jpg" 
                alt="鞋类品牌Logo" 
                class="brand-logo"
                @error="(e) => e.target.src = 'https://picsum.photos/60/60?shoe=brand'"
              >
              <div class="brand-text" :class="{ 'collapsed': dataInfo.isCollapse }">
                <h1>鞋城履行</h1>
                <p class="brand-slogan">专业鞋类电商管理系统</p>
              </div>
            </div>
            <!-- 菜单折叠按钮：悬浮显示 -->
            <el-button 
              class="collapse-btn" 
              @click="toggleMenu"
              :title="dataInfo.isCollapse ? '展开菜单' : '折叠菜单'"
            >
            <el-icon><Menu /></el-icon>
            </el-button>
          </div>

          <!-- 侧边栏分隔线：渐变风格 -->
          <div class="aside-divider" />

          <!-- 侧边菜单：鞋类管理功能模块 -->
          <el-menu
            background-color="#fff"
            text-color="#333"
            active-text-color="#165DFF"
            :router="true"
            :default-openeds="dataInfo.defaultOpen"
            :default-active="dataInfo.currentPath"
            class="sidebar-menu"
            :unique-opened="true"
            :collapse="dataInfo.isCollapse"
            :collapse-transition="true"
            @select="(key) => dataInfo.currentPath = key"
          >
            <!-- 仪表盘模块（新增：数据概览） -->
            <el-menu-item index="/dashboard" class="menu-item">
              <template #title>
                <div class="menu-item-content">
                  <el-icon><Histogram /></el-icon>
                  <span>数据仪表盘</span>
                </div>
              </template>
            </el-menu-item>
            <!-- 管理员账户 -->
            <el-sub-menu index="0" class="menu-item">
              <template #title>
                <div class="menu-item-content">
                  <el-icon><UserFilled /></el-icon>
                  <span>管理员账户</span>
                </div>
              </template>
              <el-menu-item-group title="管理员账户管理">
                <el-menu-item index="/main/adminsmanage" class="menu-item-child">
                  <el-icon><UserFilled /></el-icon>
                  <span>管理员账户</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
            <!-- 用户管理 -->
            <el-sub-menu index="1" class="menu-item">
              <template #title>
                <div class="menu-item-content">
                  <el-icon><User /></el-icon>
                  <span>用户管理</span>
                </div>
              </template>
              <el-menu-item-group title="用户账户管理">
                <el-menu-item index="/main/usermanage" class="menu-item-child">
                  <el-icon><User /></el-icon>
                  <span>用户管理</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
            <!-- 商品管理 -->
            <el-sub-menu index="2" class="menu-item">
              <template #title>
                <div class="menu-item-content">
                  <el-icon><Goods /></el-icon>
                  <span>商品管理</span>
                </div>
              </template>
              <el-menu-item-group title="商品管理">
                <el-menu-item index="/goods/list" class="menu-item-child">
                  <el-icon><Goods /></el-icon>
                  <span>商品管理</span>
                </el-menu-item>
                <el-menu-item index="/brand/BrandPageView" class="menu-item-child">
                  <el-icon><CreditCard /></el-icon>
                  <span>品牌管理</span>
                </el-menu-item>
                <el-menu-item index="/shoesizes/ShoesizesView" class="menu-item-child">
                  <el-icon><Box /></el-icon>
                  <span>存货管理</span>
                </el-menu-item>
                <el-menu-item index="/goods/photos" class="menu-item-child">
                  <el-icon><PictureFilled /></el-icon>
                  <span>图片管理</span>
                </el-menu-item>
                <el-menu-item index="/goods/spcify" class="menu-item-child">
                  <el-icon><Edit /></el-icon>
                  <span>定制鞋管理</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>

            <!--订单管理模块（核心：交易相关） -->
            <el-sub-menu index="3" class="menu-item">
              <template #title>
                <div class="menu-item-content">
                  <el-icon><List /></el-icon>
                  <span>订单管理</span>
                </div>
              </template>
              <el-menu-item-group title="订单操作">
                <el-menu-item index="/order/OrderPageView" class="menu-item-child">
                  <el-icon><List /></el-icon>
                  <span>订单管理</span>
                </el-menu-item>
                <el-menu-item index="/order/refund" class="menu-item-child">
                  <el-icon><RefreshLeft /></el-icon>
                  <span>退款管理</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
            <!-- 物流合作-->
            <el-sub-menu index="4" class="menu-item">
              <template #title>
                <div class="menu-item-content">
                  <el-icon><Ship /></el-icon>
                  <span>物流合作</span>
                </div>
              </template>
              <el-menu-item-group title="物流合作管理">
                <el-menu-item index="/" class="menu-item-child">
                  <el-icon><Ship /></el-icon>
                  <span>物流管理</span>
                </el-menu-item>
                <el-menu-item index="/customer/address" class="menu-item-child">
                  <el-icon><Shop /></el-icon>
                  <span>物流合作商管理</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
            <!-- 积分管理 -->
            <el-sub-menu index="5" class="menu-item">
              <template #title>
                <div class="menu-item-content">
                  <el-icon><Coin /></el-icon>
                  <span>积分管理</span>
                </div>
              </template>
              <el-menu-item-group title="秒杀积分管理">
                <el-menu-item index="/system/kill" class="menu-item-child">
                  <el-icon><Coin /></el-icon>
                  <span>积分管理</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
            <!-- 企宣设置 -->
            <el-sub-menu index="6" class="menu-item">
              <template #title>
                <div class="menu-item-content">
                  <el-icon><OfficeBuilding /></el-icon>
                  <span>企宣设置</span>
                </div>
              </template>
              <el-menu-item-group title="企业宣传管理">
                <el-menu-item index="/system/ads" class="menu-item-child">
                  <el-icon><Postcard /></el-icon>
                  <span>广告管理</span>
                </el-menu-item>
                <el-menu-item index="/system/log" class="menu-item-child">
                  <el-icon><Link /></el-icon>
                  <span>合作链接管理</span>
                </el-menu-item>
                <el-menu-item index="/system/information" class="menu-item-child">
                  <el-icon><Message /></el-icon>
                  <span>站内信息</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
            <!-- 评论管理 -->            
            <el-sub-menu index="7" class="menu-item">
              <template #title>
                <div class="menu-item-content">
                  <el-icon><ChatRound /></el-icon>
                  <span>评论管理</span>
                </div>
              </template>
              <el-menu-item-group title="评论管理">
                <el-menu-item index="/shoesInquiry/ShoesInquiryPageView" class="menu-item-child">
                  <el-icon><Headset /></el-icon>
                  <span>客服咨询管理</span>
                </el-menu-item>
                <el-menu-item index="/system/comment" class="menu-item-child">
                  <el-icon><ChatRound /></el-icon>
                  <span> 商品评论管理</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
          </el-menu>

        </el-aside>

        <!-- 主内容区：响应式布局 -->
        <el-container class="main-container">
          <!-- 头部导航：新增面包屑和用户信息 -->
          <Header v-if="dataInfo.showMenu">
            <template #breadcrumb>
              <!-- 面包屑导航：显示当前位置 -->
              <el-breadcrumb separator="/" class="page-breadcrumb">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: dataInfo.currentPath }">
                  {{ getPageName(dataInfo.currentPath) }}
                </el-breadcrumb-item>
              </el-breadcrumb>
            </template>
            <template #user-info>
              <!-- 用户信息区：头像+名称+退出 -->
              <div class="user-info-container">
                <el-avatar class="user-avatar" :src="store.userAvatar || 'https://picsum.photos/40/40?user=admin'">
                  {{ store.userName ? store.userName[0] : '管' }}
                </el-avatar>
                <span class="user-name">{{ store.userName || '管理员' }}</span>
                <el-dropdown @command="handleUserCommand">
                  <el-button icon="ArrowDown" size="small" type="text" class="user-dropdown-btn" />
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="profile">个人资料</el-dropdown-item>
                      <el-dropdown-item command="reset-pwd">修改密码</el-dropdown-item>
                      <el-dropdown-item command="logout" type="danger">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </template>
          </Header>

          <!-- 内容区域：增加卡片阴影和内边距 -->
          <div class="content-wrapper">
            <router-view class="page-content" />
          </div>
        </el-container>
      </div>
    </transition>

  </el-container>

<el-container v-else class="container">
  <div>
    <router-view />
  </div>
</el-container>
  </div>
</template>

<style scoped>
/* 全局样式：统一字体和基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.el-container {
    box-sizing: border-box;
    display: flex
;
    flex: 1;
    flex-basis: auto;
    flex-direction: column;
    min-width: 0;
}
.layout {
  min-height: 100vh;
  background-color: #f5f7fa;
  font-family: "Inter", "Microsoft YaHei", sans-serif;
}

/* 布局过渡动画 */
.layout-fade-enter-from,
.layout-fade-leave-to {
  opacity: 0;
  transform: translateY(10px);
}

.layout-fade-enter-active,
.layout-fade-leave-active {
  transition: all 0.3s ease;
}

/* 主容器：侧边栏+主内容区布局 */
.container-wrapper {
  display: flex;
  height: 100vh;
  transition: all 0.3s ease;
}

/* 侧边栏样式：鞋类电商风格（白色背景+蓝色主调） */
.aside {
  background-color: #fff;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
  z-index: 10;
  transition: width 0.3s ease;
  display: flex;
  flex-direction: column;
}

/* 侧边栏头部：品牌区域 */
.aside-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f2f5;
}

.brand-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.brand-logo:hover {
  transform: scale(1.05);
}

.brand-text {
  transition: all 0.3s ease;
}

.brand-text h1 {
  font-size: 18px;
  font-weight: 600;
  color: #165DFF;
  margin-bottom: 2px;
}

.brand-slogan {
  font-size: 12px;
  color: #666;
}

/* 菜单折叠按钮 - 更明显的视觉效果 */
.collapse-btn {
  width: 40px;  /* 增大点击区域 */
  height: 40px;
  border: none;
  background: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  color: #666;
  cursor: pointer;
  font-size: 18px;  /* 增大图标尺寸 */
}

/* 常态下增加轻微背景 */
.collapse-btn:not(:hover) {
  background-color: #f9f9f9;
}

/* 悬停时强化视觉反馈 */
.collapse-btn:hover {
  background-color: #e6f7ff;  /* 更明显的背景色 */
  color: #1890ff;  /* 更鲜艳的图标颜色 */
  border-radius: 6px;
  transform: scale(1.1);  /* 轻微放大效果 */
}

.collapse-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);  /* 聚焦时显示淡蓝色阴影 */
}

/* 图标本身的样式强化 */
.collapse-btn .el-icon {
  transition: all 0.3s ease;
}

/* 侧边栏分隔线 */
.aside-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, #e5e6eb, transparent);
  margin: 8px 0;
}

/* 侧边菜单样式 */
.sidebar-menu {
  border-right: none;
  flex: 1;
  overflow-y: auto;
  padding: 10px 0;
}

/* 菜单滚动条美化 */
.sidebar-menu::-webkit-scrollbar {
  width: 6px;
}

.sidebar-menu::-webkit-scrollbar-track {
  background: #f5f5f5;
}

.sidebar-menu::-webkit-scrollbar-thumb {
  background-color: #c9c9c9;
  border-radius: 3px;
  transition: background-color 0.3s ease;
}

.sidebar-menu::-webkit-scrollbar-thumb:hover {
  background-color: #a8a8a8;
}

/* 菜单项样式 */
.menu-item {
  transition: all 0.2s ease;
  margin: 0 8px;
  border-radius: 8px;
  margin-bottom: 4px;
}

.menu-item:hover {
  background-color: #f0f7ff;
  color: #165DFF;
}

/* 菜单项内容 */
.menu-item-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
}

/* 子菜单项样式 */
.menu-item-child {
  padding-left: 16px !important;
  margin: 0 8px;
  border-radius: 8px;
}

.menu-item-child:hover {
  background-color: #f0f7ff !important;
  color: #165DFF !important;
}

/* Element UI 菜单样式覆盖 */
.el-menu-item {
  height:44px !important;
line-height: 44px !important;
font-size: 13px !important;
color: #333 !important;
border-radius: 8px !important;
margin-bottom: 4px !important;
}

.el-menu-item.is-active {
background-color: #e6f0ff !important;
color: #165DFF !important;
font-weight: 500 !important;
}

.el-menu-item.is-active i {
color: #165DFF !important;
}

.el-sub-menu__title {
padding: 0 16px !important;
height: 44px !important;
line-height: 44px !important;
border-radius: 8px !important;
}

.el-sub-menu__icon-arrow {
right: 16px !important;
color: #999 !important;
transition: transform 0.3s ease;
}

.el-sub-menu.is-opened .el-sub-menu__icon-arrow {
transform: rotate(180deg);
color: #165DFF !important;
}

.el-menu-item-group__title {
padding: 8px 16px !important;
font-size: 12px !important;
color: #999 !important;
}

/* 侧边栏底部：时间和版权 */
.aside-footer {
padding: 16px;
border-top: 1px solid #f0f2f5;
transition: all 0.3s ease;
}

.current-time {
font-size: 12px;
color: #666;
margin-bottom: 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.copyright {
font-size: 11px;
color: #999;
text-align: center;
}

/* 菜单折叠状态样式调整 */
.container-wrapper.collapsed .aside {
width: 120px !important;
}

.container-wrapper.collapsed .brand-text,
.container-wrapper.collapsed .aside-footer,
.container-wrapper.collapsed .el-menu-item span,
.container-wrapper.collapsed .el-sub-menu__title span,
.container-wrapper.collapsed .el-menu-item-group__title {
display: none !important;
}

.container-wrapper.collapsed .brand-container {
gap: 0;
justify-content: center;
width: 100%;
}

.container-wrapper.collapsed .menu-item-content {
justify-content: center;
gap: 0;
width: 300px;
}

.container-wrapper.collapsed .collapse-btn {
margin-left: auto;
margin-right: auto;
}

/* 主内容区样式 */
.main-container {
flex: 1;
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}

/* 面包屑导航样式 */
.page-breadcrumb {
margin: 12px 20px;
font-size: 13px;
color: #666;
}

.el-breadcrumb__item:last-child .el-breadcrumb__inner {
color: #165DFF !important;
font-weight: 500;
}

/* 用户信息区域样式 */
.user-info-container {
display: flex;
align-items: center;
gap: 12px;
padding: 0 20px;
height: 100%;
}

.user-avatar {
width: 36px;
height: 36px;
cursor: pointer;
border: 2px solid #f0f7ff;
transition: all 0.3s ease;
}

.user-avatar:hover {
border-color: #165DFF;
transform: scale(1.05);
}

.user-name {
font-size: 14px;
color: #333;
font-weight: 500;
}

.user-dropdown-btn {
color: #999;
transition: color 0.3s ease;
}

.user-dropdown-btn:hover {
color: #165DFF;
}

/* 内容包裹区样式 */
.content-wrapper {
flex: 1;
padding: 20px;
overflow-y: auto;
background-color: #f5f7fa;
}

/* 页面内容样式（配合卡片组件） */
.page-content {
background-color: #fff;
border-radius: 12px;
box-shadow: 0 2px 12px rgba (0, 0, 0, 0.05);
padding: 24px;
min-height: calc (100% - 48px);
transition: all 0.3s ease;
}

.page-content:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* 页脚样式 */
.page-footer {
padding: 16px 20px;
border-top: 1px solid #f0f2f5;
font-size: 12px;
color: #999;
text-align: center;
background-color: #fff;
}

/* 无菜单页面（登录 / 注册）样式 */
.no-menu-container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient (135deg, #f0f7ff 0%, #e6f0ff 100%);
}

.no-menu-content {
width: 100%;
max-width: 420px;
padding: 40px;
background-color: #fff;
border-radius: 16px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}

.no-menu-content:hover {
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}

/* 响应式设计：适配不同屏幕尺寸 */
@media (max-width: 1200px) {
.aside {
width: 220px !important;
}

.brand-text h1 {
font-size: 16px;
}

.menu-item-content {
font-size: 13px;
}
}

@media (max-width: 992px) {
/* 中等屏幕：默认折叠菜单 */
.dataInfo.isCollapse {
isCollapse: true;
}

.container-wrapper {
.aside {
width: 64px !important;
}

.brand-text,
.aside-footer,
.el-menu-item span,
.el-sub-menu__title span,
.el-menu-item-group__title {
display: none !important;
}

.brand-container {
gap: 0;
justify-content: center;
width: 100%;
}

.menu-item-content {
justify-content: center;
gap: 0;
}

.collapse-btn {
margin-left: auto;
margin-right: auto;
}
}
}

@media (max-width: 768px) {
/* 小屏幕：隐藏侧边栏，通过按钮控制显示 */
.aside {
position: fixed;
left: -250px;
top: 0;
height: 100vh;
transition: left 0.3s ease;
}

.aside.show {
left: 0;
}

.main-container {
margin-left: 0 !important;
}

/* 新增移动端菜单按钮 */
.mobile-menu-btn {
display: block !important;
position: fixed;
left: 16px;
top: 16px;
z-index: 999;
width: 40px;
height: 40px;
border-radius: 8px;
background-color: #fff;
box-shadow: 0 2px 8px rgba (0, 0, 0, 0.15);
display: flex;
align-items: center;
justify-content: center;
color: #165DFF;
}

.content-wrapper {
padding: 16px;
}

.page-content {
padding: 16px;
}
}

@media (max-width: 480px) {
.no-menu-content {
padding: 24px;
margin: 0 16px;
}

.brand-logo {
width: 36px;
height: 36px;
}

.user-info-container {
gap: 8px;
}

.user-name {
font-size: 13px;
}
}

/* 鞋类管理特有的辅助样式（可根据实际页面扩展） /
/ 商品卡片悬停效果 */
.shoe-card {
transition: all 0.3s ease;
border-radius: 8px;
overflow: hidden;
}

.shoe-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* 尺码选择器样式 */
.size-selector {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}

.size-option {
width: 36px;
height: 36px;
border-radius: 6px;
border: 1px solid #e5e6eb;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
color: #333;
cursor: pointer;
transition: all 0.2s ease;
}

.size-option:hover {
border-color: #165DFF;
background-color: #f0f7ff;
}

.size-option.active {
background-color: #165DFF;
color: #fff;
border-color: #165DFF;
}

/* 操作按钮组样式 */
.operation-btn-group {
display: flex;
gap: 8px;
}

.operation-btn {
padding: 4px 12px;
border-radius: 6px;
font-size: 12px;
transition: all 0.2s ease;
}

.primary-btn {
background-color: #165DFF;
color: #fff;
border: none;
}

.primary-btn:hover {
background-color: #0f48d9;
}

.success-btn {
background-color: #00b42a;
color: #fff;
border: none;
}

.success-btn:hover {
background-color: #00a327;
}

.warning-btn {
background-color: #ff7d00;
color: #fff;
border: none;
}

.warning-btn:hover {
background-color: #e67200;
}

.danger-btn {
background-color: #f53f3f;
color: #fff;
border: none;
}

.danger-btn:hover {
background-color: #e03636;
}

/* 数据统计卡片样式 */
.stat-card {
border-radius: 12px;
padding: 20px;
background-color: #fff;
box-shadow: 0 2px 12px rgba (0, 0, 0, 0.05);
transition: all 0.3s ease;
margin-bottom: 20px;
}

.stat-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
}

.stat-card .stat-title {
font-size: 14px;
color: #666;
margin-bottom: 8px;
}

.stat-card .stat-value {
font-size: 24px;
font-weight: 600;
color: #333;
margin-bottom: 4px;
}

.stat-card .stat-change {
font-size: 12px;
display: flex;
align-items: center;
gap: 4px;
}

.stat-card .increase {
color: #00b42a;
}

.stat-card .decrease {
color: #f53f3f;
}

/* 图表容器样式 */
.chart-container {
border-radius: 12px;
padding: 20px;
background-color: #fff;
box-shadow: 0 2px 12px rgba (0, 0, 0, 0.05);
margin-bottom: 20px;
height: 300px;
}
</style>

<script>
// 新增页面名称映射（用于面包屑显示）
const getPageName = (path) => {
const pageMap = {
'/': '首页',
'/dashboard': '数据仪表盘',
'/goods/list': '商品列表',
'/goods/add': '新增商品',
'/goods/category': '商品分类',
'/goods/attribute': '规格管理',
'/order/list': '订单列表',
'/order/refund': '退款管理',
'/order/ship': '物流管理',
'/customer/list': '客户列表',
'/customer/address': '地址管理',
'/stock/list': '库存列表',
'/stock/warning': '库存预警',
'/system/admin': '管理员列表',
'/system/log': '操作日志',
'/login': '登录',
'/register': '注册'
}
return pageMap[path] || path.split('/').pop() || '未知页面'
}

// 新增用户操作处理（退出登录等）
const handleUserCommand = (command) => {
const router = useRouter()
const store = useAdminStore()
switch (command) {
case 'profile':
router.push('/system/profile')
break
case 'reset-pwd':
router.push('/system/reset-pwd')
break
case 'logout':
// 清除token和用户信息
store.setToken('')
store.setUserInfo({})
// 跳转登录页
router.push('/login')
ElMessage.success('退出登录成功')
break
}
}
</script>
  